<template>
    <div class="wrapper-containers">
        <div class="Student-track-record-img">
            <img src="https://oss.xiaoniaoai.com/beijingsd@2x.png" alt="">
            <span class="iconfont icon-fanhui" @click="gobacks"></span>
            <h2 class="ALLRecord">所有档案</h2>
        </div>
        <div class="perinfo">
          <img src="https://oss.xiaoniaoai.com/bk-01s@2x.png" alt="">
          <img :src="student_info.avatar" alt="" class="perimg">
            <div class="pername">
                <p>{{student_info.username}}</p>
                <p class="pergender">
                    <span>{{student_info.sex == 0 ? '女' : '男'}}</span>
                       
                </p>
            </div>
            <div class="numbers">
                <div>
                     <p>
                        <span>{{student_info.study_total}}</span>
                        <span>档案数</span>   
                    </p>
                    <p>
                        <span>{{student_info.score}}</span>
                        <span>人气值</span>  
                    </p>
                    <p>
                        <span>{{student_info.hits}}</span>
                        <span>浏览量</span>
                        
                    </p>
                </div>
            </div>
        </div>
        <div class="leftline">
        </div>
         <ul>
             <li v-for='(item,index) in course_list' :key='index'>
                 <div class="titleline"  @click= "godetail(index)()">
                     <img src="https://oss.xiaoniaoai.com/icon@2x.png" alt="">
                    <p class="icondate"> <i>{{item.course_date.substring(5,7) }}</i><i>/</i><i>{{item.course_date.substring(8,10) }}</i></p>
                     <span>{{item.course_name}}</span>
                 </div>
                 <div class="list-content">
                   
                       <img :src= "items+'!211cratch'" alt="" v-for="(items,index) of item.photos.split(',')" v-if=" index <1 " :key="index"  @click= "godetail(index)">
                     <div class="wrapper-right">
                         <!-- <h3>{{items.title}}</h3> -->
                          <span class="grade"  @click= "godetail(index)">档案评分:</span>
                          <span v-for="(item,index) in item.score" :key="index" @click= "godetail(index)">
                            <img src="https://oss.xiaoniaoai.com/grade-star.png" alt=""  style="width:.2rem;height:.2rem"  @click= "godetail(index)">
                          </span>
                            <p class="content-intro" @click= "godetail(index)">{{item.goal}}</p>
                            <i class="times" @click= "godetail(index)">浏览{{item.hits}}次</i>
                            <i class="times1" @click= "godetail(index)">{{item.course_date }}</i>
                            <p class="seting">
                             <img src="https://oss.xiaoniaoai.com/icon-06@3x.png" alt="" ><span @click= "nice" class="nice($event)" flag = true >{{item.hits}}</span>
                           </p>
                     </div>
                 </div>
            </li>
         </ul>
    </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'mint-ui';
export default {
    name:'study_list',
   data () {
       return {
        msg:'',
        infos:'',
        uid:localStorage.getItem('uid'),
        user_id:localStorage.getItem('user_id'),
        student_info:'',
        course_list:'',
        uids: localStorage.getItem('user_uid'),
        reos:'',
       }
   },
   methods : {
       gobacks () {
            this.$router.go(-1);
       },
       godetail(e){
           this.$router.push({
          path: '/study_detail',
          query: {
            e: e
          }})
           },
         nice(e){
           if(e.target.getAttribute('flag') == 'true'){
               e.target.innerHTML ++
              e.target.setAttribute('flag',false)
           }else if (e.target.getAttribute('flag') == 'false'){
                e.target.innerHTML --
            e.target.setAttribute('flag',true)
           }
       },
   },
   created () {
      var idfromteachers = window.location.href.split("?")[1]
      var idorigin = idfromteachers.split("=")[1]
      console.log(idorigin)
      if(idorigin == ''){
      }else{
         this.user_id = idorigin
      }
   },
   mounted(){
      this.WXConfig.wxShowMenu();
      axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
        id:this.user_id
      }).then((val) => {
        console.log(val);
        if(val.data.code == 1){
          this.student_info = val.data.data;
        }
      }).catch((err) => {
        console.log(err);
      });
      axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
        id:this.user_id
      }).then((val) => {
          console.log(val.data.data.data)
        if(val.data.data.data.length == '0'){
             Toast({
              message: '您目前还没有档案',
              position: 'middle',
              duration: 3000
            })
        }
        if(val.data.code == 1){
          this.course_list = val.data.data.data;
          this.reos = val.data.data.data.length;
             var div = document.getElementsByClassName('leftline')[0]
            var heu = this.reos * 4.3;
            div.style.height = heu+'rem'
        }
      }).catch((err) => {
        console.log(err);
      });
     
    },
     filters: {
			formatDate:function (date) {
			var d = new Date(date);
			var year = d.getFullYear();
			var month = d.getMonth() + 1;
			var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
			return  year+ '-' + month + '-' + day + ' ' ;
			}
		}
}
</script>
<style scoped>
.icondate{
    position: absolute;
    left: .6rem;
    top:.05rem;
}
.icondate > i {
    font-size: .28rem;
    color: #fff;
}
.wrapper-containers{
    width: 100%;
    height: auto;
    
}
.Student-track-record-img{
  width: 100%;
  height: 4.76rem;
  position: relative;
}
.Student-track-record-img > img {
  position:absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.icon-fanhui{
  width:.5rem;
  height: .8rem;
  font-size: .7rem;
  line-height: .8rem;
  float: left;
  color: #fff
}
.ALLRecord{
  width: 50%;
  height: .8rem;
  line-height: .8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .40rem;
  color:#fff;
}
.perinfo{
    width: 90%;
    height: 3.7rem;
    position: absolute;
    left: 5%;
    top: 1.5rem;
}
.perinfo > img:nth-child(1) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.perinfo >img:nth-child(2){
  width: 1.63rem;
  height: 1.63rem;
  border:1px solid #cecece;
  border-radius: 50%;
  position: absolute;
  left: 38%;
  top: -15%;
}
.perinfo > .pername {
    width: 50%;
    height: 30%;
    position: absolute;
    left: 25%;
    top: 30%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: column;
    margin-top: .1rem;
}
.perinfo > .pername > p {
  font-size:.28rem;
  font-size:.28rem;
  font-family:'PingFang-SC-Medium';
  font-weight:500;
  color:rgba(90,90,90,1);
}
.perinfo > .pername>.pergender{
    display: flex;
    justify-content:space-around;
    width:70%;
    margin-top: .1rem;
}
.perinfo > .pername>.pergender > span {
    width: .82rem;
    height: .34rem;
  display: flex;
  justify-content: center;
  align-items: center;
    background:#FDC600;
    color: #fff;
    border-radius:10px;
}
.numbers{
    width: 85%;
    height: 1.2rem;
    position: absolute;
    left: 7.5%;
    bottom: 5%;
    color: #C6FFF5;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;
}
.numbers>div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
}
.numbers>div>p{
    height:.8rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
}
.numbers>div>p>span:nth-child(1){
    font-size: .36rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(89,89,89,1);
}
.numbers>div>p>span:nth-child(2){
    font-size:.22rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(135,135,135,1);
}
.leftline{
    width: .02rem;
    float: left;
    position: absolute;
    left: 4%;
    top: 4.8rem;
    background:rgba(253,198,0,1);
    border-radius:3px;
}
ul{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    margin-top: .6rem;
    margin-bottom:1rem;
}
li{
    width: 95%;
    height: 4.3rem;
    position: relative;
}
.titleline >img{
    width:1.64rem;
    height: .66rem;
    float: left;
    margin-right:.3rem;
}
.titleline > span {
    font-size:.3rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(81,81,81,1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.list-content{
   width: 95%;
   height: 2.58rem;
   position: absolute;
   bottom: 11%;
   left: 7.5%;
   box-shadow: #cecece 0px 0px 10px;
}
.list-content > img{
    width: 2.1rem;
    height: 2.8rem;
    position: absolute;
    bottom: 5%;
    left: 5%;
}
.wrapper-right{
    position: absolute;
    bottom: 5%;
    right: 5%;
    height:100%;
    width: 52%;
}
.wrapper-right > span{
    font-size:.22rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(108,108,108,1);
    margin-top:.2rem;
    position: relative;
    top: .2rem;
    left: 0
}
.content-intro{
    width: 100%;
    height: .8rem;
    line-height: .4rem;
    text-indent: .5rem;
    font-size:.24rem;
    font-family:'PingFang-SC-Regular';
    font-weight:400;
    color:rgba(190,190,190,1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow:ellipsis;
    word-break: break-all;
    overflow: hidden;
    position: relative;
    top: .6rem;
    left: 0
}
.times{
    width:40%;
    float: left;
    height: .6rem;
    font-size: .22rem;
    font-family:'PingFang-SC-Regular';
    font-weight:400;
    color:rgba(136,136,136,1);
    position: absolute;
    bottom: 3%;
    left: 0;
    line-height: .6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.times1{
    width:56%;
    float: left;
    height: .6rem;
    font-size: .22rem;
    font-family:'PingFang-SC-Regular';
    font-weight:400;
    color:rgba(136,136,136,1);
    position: absolute;
    bottom: 3%;
    left: 30%;
    line-height: .6rem;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.seting{
    width: .8rem;
    height: .4rem;
    position: absolute;
    right:-6%;
    bottom: 5.7%;
    font-size:.22rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(4,222,183,1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
.seting>img{
    width: .4rem;
    height: .4rem;
    float: left;
    margin-left: .05rem
}
</style>


